<template>
  <div class="flter-list">
    <ToRadio
      :title="item.title"
      :id="item.id"
      :data="item.data"
      v-for="item in searchData"
      :key="item.id"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

import { useSearchStore } from '@/stores/search'

import ToRadio from '@comps/ToSearch/ToRadio.vue'

function getFlterListData() {
  const SearchStore = useSearchStore()
  const searchData = ref([])

  function callback() {
    let timer = setTimeout(() => {
      if (
        SearchStore.tag === undefined ||
        SearchStore.tag === null ||
        SearchStore.tag.length <= 0
      ) {
        callback()
        clearTimeout(timer)
        return
      }
      searchData.value = [
        {
          id: 0,
          title: '地区',
          data: [
            {
              id: 0,
              tagName: '全部'
            },
            {
              id: 1,
              tagName: '日本'
            },
            {
              id: 2,
              tagName: '中国'
            }
          ]
        },
        {
          id: 1,
          title: '类型',
          data: [
            {
              id: 0,
              tagName: '全部'
            },
            {
              id: 1,
              tagName: 'TV'
            },
            {
              id: 2,
              tagName: 'OVA'
            },
            {
              id: 3,
              tagName: '剧场版'
            }
          ]
        },
        {
          id: 2,
          title: '排序',
          data: [
            {
              id: 0,
              tagName: '更新时间'
            },
            {
              id: 1,
              tagName: '总排行'
            }
          ]
        },
        {
          id: 3,
          title: '标签',
          data: SearchStore.tag
        },
        {
          id: 4,
          title: '年份',
          data: (function getYear() {
            const nowYear = new Date().getFullYear()
            let years = []
            function addObj(i, value) {
              const obj = {
                id: i,
                tagName: value
              }
              return obj
            }
            years.push(addObj(0, '全部'))
            for (let i = 0; i < 20; i++) {
              years.push(addObj(i + 1, nowYear - i))
            }
            return years
          })()
        }
      ]
      searchData.value[3].data.unshift({
        id: 0,
        tagName: '全部'
      })
    }, 100)
  }

  callback()

  return {
    searchData,
    SearchStore
  }
}

export default {
  name: 'FlterList',
  props: {},
  components: {
    ToRadio
  },
  setup() {
    const SearchStore = useSearchStore()
    SearchStore.getTag()
    // watch(SearchStore.tag, { immediate: true })

    return {
      ...getFlterListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.flter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 30px;
}
</style>
'
